﻿@model MvcOesVietNam.Models.KhachHangTieuBieu

@{
    ViewBag.Title = "Partner | Khách hàng";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}

<script src="/Content/Js/selectnav.min.js"></script>
<script src="/Content/Js/prettyPhoto.js"></script>

<style type="text/css">
    .container {
        position: relative;
        /*width: 960px;*/
        margin: 0 auto;
        padding: 0;
    }

        .container .sixteen.columns {
            width: 1000px;
        }

    .filter {
        background: #f6f6f6;
        display: block;
        height: 50px;
        margin-bottom: 50px;
        position: relative;
        width: 1000px;
        text-align: center;
        color: #666;
        /*text-transform: lowercase;*/
    }

        .filter .current a {
            background: #1A99CC;
            color: #fff!important;
        }


    #content a, .post-content a {
        color: #ff8c00;
    }

    .filter a {
        display: inline-block;
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        width: auto;
        color: #8a8e90!important;
        float: left;
        padding-left: 20px;
        padding-right: 20px;
    }

        .filter a:hover {
            text-decoration: none;
            background: #1A99CC;
            color: #fff!important;
            font-weight: lighter;
        }

    /*-------------------*/

    #projects4, #projects3, #projects2 {
        display: block;
        overflow: hidden;
        width: 100%;
        width: 1000px;
        margin-left: 3px;
    }

        #projects4 li {
            float: left;
            height: auto;
            list-style: none outside none;
            margin: 10px;
            position: relative;
            width: 225px;
        }
</style>

@*Hover*@
<style type="text/css">
    .image-hover {
        overflow: hidden;
        position: relative;
        width: 225px;
        height: 155px;
        background: #EEE url(/Content/Images/loading_KH.gif) center center no-repeat;
        float: left;
        border: #CCC solid 1px;
        margin: 0 auto 10px;
        padding: 5px;
    }

    .image-block {
        display: inline-block;
        margin: 0 8px 8px 0;
    }

    .zoom, .link {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -khtml-border-radius: 50%;
        border-radius: 50%;
        height: 40px;
        width: 40px;
        position: absolute;
        top: 220px;
        border: 2px solid #ffffff;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
    }

    .zoom {
        left: 66px;
        background-image: url(/Content/Images/zoom.png);
        background-position: 0 0;
        z-index: 999;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
    }

    .link {
        right: 66px;
        background-image: url(/Content/Images/link.png);
        background-position: 0 0;
        z-index: 999;
        transition-delay: 0.1s;
        -o-transition-delay: 0.1s;
        -moz-transition-delay: 0.1s;
        -webkit-transition-delay: 0.1s;
    }

        .zoom:hover, .link:hover {
            opacity: 1;
            filter: alpha(opacity=100);
            z-index: 999;
            background-color: rgba(27, 161, 226, 0.8);
        }

        .zoom a, .link a {
            display: block;
            width: 40px;
            height: 40px;
            text-indent: -9999px;
        }

    .image-hover:hover .zoom,
    .image-hover:hover .link {
        top: 80px;
    }

    .item-description {
        position: absolute;
        top: -245px;
        left: 0;
        right: 0;
        height: 175px;
        background: rgba(27, 161, 226, 0.8);
        opacity: 0.9;
        text-align: center;
        color: #ffffff;
        transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
    }

    .image-hover:hover .item-description {
        top: 0;
    }

    .item-description p {
        padding: 20px 0;
        margin: 0;
        font-family: 'Tahoma', sans-serif;
        font-size: 18px;
        color: #ffffff;
        line-height: 18px;
        font-weight: 200;
        border-bottom: 1px dotted #ffffff;
        width: 90%;
        margin: 0px auto;
        margin-bottom: 15px;
    }
</style>


<div class="Shadown_MenuTop"></div>

<ul id="breadcrumbs-one" style="margin: 0 auto">
    <li><a href="/">
        <i class="fa fa-home" style="font-size: 15px"></i>&nbsp;Trang chủ</a>
    </li>
    <li><a class="current">Khách hàng</a></li>
</ul>

<div class="show">
    <div style="padding: 20px">
        <div style="height: 55px">
            <p id="slide-client" class="text"><strong></strong><span></span></p>
            <script type="text/javascript">if (!window.slider) var slider = {}; slider.data = [{ "id": "slide-img-1", "client": "<h4>Khách hàng tiêu biểu</h4>", "desc": "" }];</script>
        </div>
    </div>

    <div class="container">
        <div class="sixteen columns">

            <!-- Isotope Filter -->

            <ul class="filter group">
                <li class="current all"><a href="#">Xem tất cả</a></li>

                <li class="thoi-trang"><a href="#">Thời trang</a></li>
                <li class="bat-dong-san"><a href="#">Mỹ phẩm</a></li>
                <li class="thuc-pham"><a href="#">Đồ trẻ em</a></li>
                <li class="phuong-tien-van-chuyen"><a href="#">Nội thất</a></li>
                <li class="cong-nghiep-san-xuat"><a href="#">Gia dụng</a></li>
                <li class="dao-tao"><a href="#">Điện máy</a></li>
                <li class="khac"><a href="#">Khác</a></li>
            </ul>
            <!-- Isotope Filter / End -->
        </div>


        <div class="sixteen columns">
            <div id="projects4">
                <ul class="portfolio group">

                    @foreach (var item in ViewBag.ThoiTrang)
                    {
                        <li class="item" data-id="id-2054" data-type="thoi-trang">
                            <div class="image-hover">
                                <img src="@item.Logo" alt="title here" style="width:225px;height:155px">

                                <div class="item-description">
                                    <p>@item.TenWeb</p>
                                </div>
                                <span class="zoom" title="Xem chi tiết"><a href="@Url.Action("PartnerDetails", "Home", new { id=item.MaCty})"></a></span>
                                <span class="link" title="Xem Website"><a href="@item.UrlWeb" target="_blank"></a></span>
                            </div>
                        </li>
                    }

                    @foreach (var item in ViewBag.MyPham)
                    {
                        <li class="item" data-id="id-2052" data-type="bat-dong-san">
                            <div class="image-hover">
                                <img src="@item.Logo" alt="title here" style="width:225px;height:155px">

                                <div class="item-description">
                                    <p>@item.TenWeb</p>
                                </div>
                                <span class="zoom" title="Xem chi tiết"><a href="@Url.Action("PartnerDetails", "Home", new { id=item.MaCty})"></a></span>
                                <span class="link" title="Xem Website"><a href="@item.UrlWeb" target="_blank"></a></span>
                            </div>
                        </li>
                    }

                    @foreach (var item in ViewBag.DoTreEm)
                    {
                        <li class="item" data-id="id-2062" data-type="thuc-pham">
                            <div class="image-hover">
                                <img src="@item.Logo" alt="title here" style="width:225px;height:155px">

                                <div class="item-description">
                                    <p>@item.TenWeb</p>
                                </div>
                                <span class="zoom" title="Xem chi tiết"><a href="@Url.Action("PartnerDetails", "Home", new { id=item.MaCty})"></a></span>
                                <span class="link" title="Xem Website"><a href="@item.UrlWeb" target="_blank"></a></span>
                            </div>
                        </li>
                    }

                    @foreach (var item in ViewBag.NoiThat)
                    {
                        <li class="item" data-id="id-3267" data-type="phuong-tien-van-chuyen">
                            <div class="image-hover">
                                <img src="@item.Logo" alt="title here" style="width:225px;height:155px">

                                <div class="item-description">
                                    <p>@item.TenWeb</p>
                                </div>
                                <span class="zoom" title="Xem chi tiết"><a href="@Url.Action("PartnerDetails", "Home", new { id=item.MaCty})"></a></span>
                                <span class="link" title="Xem Website"><a href="@item.UrlWeb" target="_blank"></a></span>
                            </div>
                        </li>
                    }

                    @foreach (var item in ViewBag.GiaDung)
                    {
                        <li class="item" data-id="id-3265" data-type="cong-nghiep-san-xuat">
                            <div class="image-hover">
                                <img src="@item.Logo" alt="title here" style="width:225px;height:155px">

                                <div class="item-description">
                                    <p>@item.TenWeb</p>
                                </div>
                                <span class="zoom" title="Xem chi tiết"><a href="@Url.Action("PartnerDetails", "Home", new { id=item.MaCty})"></a></span>
                                <span class="link" title="Xem Website"><a href="@item.UrlWeb" target="_blank"></a></span>
                            </div>
                        </li>
                    }

                    @foreach (var item in ViewBag.DienMay)
                    {
                        <li class="item" data-id="id-2058" data-type="dao-tao">
                            <div class="image-hover">
                                <img src="@item.Logo" alt="title here" style="width:225px;height:155px">

                                <div class="item-description">
                                    <p>@item.TenWeb</p>
                                </div>
                                <span class="zoom" title="Xem chi tiết"><a href="@Url.Action("PartnerDetails", "Home", new { id=item.MaCty})"></a></span>
                                <span class="link" title="Xem Website"><a href="@item.UrlWeb" target="_blank"></a></span>
                            </div>
                        </li>
                    }

                    @foreach (var item in ViewBag.Khac)
                    {
                        <li class="item" data-id="id-2084" data-type="khac">
                            <div class="image-hover">
                                <img src="@item.Logo" alt="title here" style="width:225px;height:155px">

                                <div class="item-description">
                                    <p>@item.TenWeb</p>
                                </div>
                                <span class="zoom" title="Xem chi tiết"><a href="@Url.Action("PartnerDetails", "Home", new { id=item.MaCty})"></a></span>
                                <span class="link" title="Xem Website"><a href="@item.UrlWeb" target="_blank"></a></span>
                            </div>
                        </li>
                    }

                </ul>
            </div>
        </div>
    </div>
</div>
<div class="clear"></div>
